<template>
    <div class="login">
        <!-- 
            form组件的属性
            status-icon属性为输入框添加了表示校验结果的反馈图标。
            :model 表单数据对象
            label-width="100px"  提示标签的宽度
            :rules="rules"   验证的规则(对应每个字段prop属性定义)
         -->
        <el-form class="login-box" :model="form" status-icon :rules="rules" ref="loginForm" label-width="100px">
            <el-form-item label="用户名" prop="user">
                <el-input type="text" v-model="form.user" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <!-- 每次失焦 重置iwPwdOk level  => 重新验证 -->
                <el-input type="text" v-model="form.pwd" autocomplete="off" @blur="()=>{
                    this.isPwdOk = false;
                    this.level = null;
                    this.$refs.loginForm.clearValidate('repwd'); // 移出验证结果
                }"></el-input>
                <div class="pwdTips" v-if="isPwdOk">
                    <span v-if="level == 1">弱</span>
                    <span v-if="level == 2">中</span>
                    <span v-if="level == 3">强</span>
                    <span v-if="level == 4">超强</span>
                </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="repwd">
                <el-input type="text" v-model="form.repwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitHandler">提交</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {mapActions} from "vuex"

export default {
    name: "LoginView",
    data() {
        // rule   当前验证规则的字段信息(对象)
        // value => 验证函数被触发 表单对应的值
        // callback()  => 验证时的提示回调  如果回调函数中有内容 => 错误提示  没有内容 => 成功提示

        // 写成箭头函数 !!!   this => 当前实例 (如果是普通函数指向当前rule对象)
        let validateUser = (rule, value, callback) => {
            console.log(rule, value, callback);

            var reg = /^[a-zA-Z]\w{2,6}$/;

            if (!value) {
                callback("请输入用户名!")
            } else if (!(value.length >= 3 && value.length <= 7)) {
                callback("用户名长度在 3 到 7 个字符!")
            } else if (!reg.test(value)) {
                callback("用户名由数字,字母,下划线组成,且不能以数字开头");
            } else {
                callback()
            }
        }

        let validatePwd = (rule, value, callback) => {
            console.log(rule, value, callback);

            // 密码格式成功 -> 验证密码强度
            // 数字 大写  小写  _   

            var isExistNum = /[0-9]/.test(value);
            var isExistSmall = /[a-z]/.test(value);
            var isExistBig = /[A-Z]/.test(value);
            var isExistSpe = /_/.test(value);

            var level = isExistNum + isExistSmall + isExistBig + isExistSpe;

            console.log("this", this);

            this.isPwdOk = true;
            this.level = level;

            // 每次密码改动之后 => 需要重新确认再次输入的密码是否正确
            if(this.form.repwd){   // 有值再验证
                this.$refs.loginForm.validateField("repwd");
            }


            callback();
        }

        let validateRepwd = (rule,value,callback)=>{
            if(!this.form.pwd){ // 密码没有输入
                callback("请先输入密码,然后确认");
            }else if(this.isPwdOk==false){ // 密码格式有误
                callback("密码格式有误,请先修改密码");
            }else if(this.form.pwd != this.form.repwd){
                callback("两次密码输入不一致");
            }else{
                callback();
            }
        }


        return {
            isPwdOk: false,
            level: null,
            form: {
                user: "admin",
                pwd: "123123",
                repwd: "123123",
            },
            // 对应字段名称(el-input-item => prop属性填写验证规则)
            rules: {
                user: [
                    // // 必填
                    // { type: 'string',required: true, message: '请输入用户名!', trigger: 'blur' },
                    // // 长度3-7
                    // { min: 3, max: 7, message: '用户名长度在 3 到 7 个字符', trigger: 'blur' },
                    // // 格式(正则)
                    // { pattern:/^[a-zA-Z]\w{2,6}$/, message: '用户名由数字,字母,下划线组成,且不能以数字开头', trigger: 'blur'},
                    // 自定义验证函数
                    { type: "string", required: true, pattern: /^[a-zA-Z]\w{2,6}$/, validator: validateUser, trigger: 'blur' }
                ],
                pwd: [
                    // 必填
                    { type: 'string', required: true, message: '请输入密码!', trigger: 'blur' },
                    // 长度3-7
                    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' },
                    // 格式(正则)
                    { pattern: /^\w{6,12}$/, message: '密码由数字,字母,下划线组成,且不能以数字开头', trigger: 'blur' },
                    // 自定义验证函数
                    { validator: validatePwd, trigger: 'blur' }
                ],
                repwd: [
                    { validator: validateRepwd, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        ...mapActions(["loginAndUpdateAuthorityInfo"]),
        submitHandler(){
            // this.$refs.loginForm.validate();  // 全都验证 
            //全都验证 获取验证结果  => 
            // 1. 接收回调函数的版本
            // this.$refs.loginForm.validate(function(bool,obj){
            //     console.log("校验结果",bool,obj);
            //     if(bool){
            //         console.log("去登录");
            //     }
            // });
            
            // 2. 如果不传入回调函数  => 返回Promise实例
            this.$refs.loginForm.validate().then(res=>{
                console.log("校验成功",res);

                this.loginAndUpdateAuthorityInfo({
                    adminname: this.form.user,
                    password:this.form.pwd,
                }).then(data=>{
                    console.log("登录成功",data);
                    this.$message({
                        type:"success",
                        message:"登录成功!"
                    })

                    var {ReturnUrl} = this.$route.query;
                    if(ReturnUrl){
                        this.$router.push(ReturnUrl);
                    }else{
                        this.$router.push("/");
                    }
                }).catch(err=>{
                    console.log("出现错误",err);
                    this.$message({
                        type:"error",
                        message:err.message
                    })
                })

            }).catch(err=>{
                console.log("校验失败",err);
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background: url("https://cas.1000phone.net/cas/images/login/bg.png") no-repeat center center;
}

.login-box {
    width: 500px;
    padding: 40px;
    padding-top: 50px;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pwdTips {
    color: #67C23A;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}
</style>